<nz-layout
  *ngIf="ms.game && ms.ready && ms.pageOk"
  style="width: 100vw; height: 100vh"
  @fadeIn
>
  <nz-sider
    class="menu-sidebar"
    nzCollapsible
    nzBreakpoint="xl"
    [(nzCollapsed)]="ms.isCollapsed"
    [nzTheme]="ms.sideTheme"
    nzCollapsedWidth="50"
  >
    <app-side-menu [isCollapsed]="ms.isCollapsed"></app-side-menu>
  </nz-sider>

  <nz-layout class="app-layout">
    <nz-header>
      <div
        class="app-header"
        [ngClass]="os.darkHeader ? 'dark-background' : 'light-background'"
      >
        <div class="headerRow">
          <span class="header-trigger t2" (click)="visible = !visible">
            <i
              class="trigger"
              nz-icon
              [nzType]="ms.isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
          </span>
          <div class="header-right">
            <!-- <a>
              <nz-badge [nzCount]="5">
                <i nz-icon nzType="bell" nzTheme="outline"></i> </nz-badge
            ></a> -->

            <!-- <button nz-button nzType="default" class="pad">
              <i nz-icon nzType="setting"></i>
            </button> -->
          </div>
        </div>
        <div class="headerRow">
          <app-material-top></app-material-top>
        </div>
      </div>
    </nz-header>

    <nz-content>
      <!-- [class.inner-content]="ms.innerContent" -->
      <div class="full-height" [class.inner-content]="ms.innerContent">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>

<nz-drawer
  *ngIf="ms.game"
  [nzClosable]="false"
  [nzVisible]="visible"
  nzPlacement="left"
  nzTitle=""
  (nzOnClose)="close()"
  [nzBodyStyle]="{ padding: 0 }"
>
  <ng-container *nzDrawerContent>
    <app-side-menu
      [notCollapsed]="true"
      [isCollapsed]="ms.isCollapsed"
      [mobile]="true"
      (selectLink)="closeDrawer()"
    ></app-side-menu>
  </ng-container>
</nz-drawer>

<!-- Custom Notifications -->
<ng-template #customNoti let-myNoti="data">
  <div class="ant-notification-notice-content">
    <div class="ant-notification-notice-with-icon">
      <span class="ant-notification-notice-icon">
        <i nz-icon [nzType]="myNoti.icon" [ngClass]="myNoti.iconClass"></i>
      </span>
      <div class="ant-notification-notice-message">{{ myNoti.title }}</div>
      <!-- prettier-ignore -->
      <div class="ant-notification-notice-description" *ngIf="myNoti.description !== ''">{{ myNoti.description }}</div>
    </div>
  </div>
</ng-template>
<ng-template #closeNoti></ng-template>

<div *ngIf="!ms.pageOk">
  <h1>Game is already opened in another tab!</h1>
  <button (click)="ms.reload()" nz-button nzType="primary">Refresh</button>
</div>

<app-spell-bar *ngIf="isLarge && ms.game && ms.ready"></app-spell-bar>
